import React, {useEffect} from 'react'
import {apigetUserInfo} from './api'
import { connect } from 'react-redux';
import { useNavigate, Outlet } from 'react-router-dom'



// 登录页面和首页的父级路由
// 获取用户信息
const Layout = (props) => {

    const { dispatch } = props;

    const navigate = useNavigate()
    // 获取用户信息
    useEffect(() => {
        // componentDidMount
        apigetUserInfo().then(res => {
            // 将用户信息保存到redux钟
            dispatch({ type: 'CHANGE_USER_INFO', data: res.data })
        }).catch(err => {
            // 返回结果非 200，跳转到登录页面
            navigate('/login')
        })
    }, [])
    return <div className="layout-box">
        <Outlet/>
    </div>
}

const mapStateToProps = state => state

export default connect(mapStateToProps)(Layout)